import styled from "styled-components";

export const StyledUpload = styled.div<{ $thumbnail?: boolean }>`
  .ant-upload {
    border: none !important;
  }
  .ant-upload-list {
    display: ${(props) => (props.$thumbnail ? "flex" : "block")};
    flex-wrap: wrap;
  }
`;

export const StyledUploadAvatar = styled.div`
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  .ant-upload,
  .ant-upload-select {
    border: none !important;
  }
`;

export const StyledUploadBox = styled.div`
  width: 100%;
  max-width: 400px;
  .ant-upload {
    border: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: box-shadow 0.3s ease-in-out;
    height: 300px;
    overflow: hidden;
  }
  .ant-upload:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  .ant-upload-list {
    display: none;
  }
  .ant-upload-drag {
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;

export const GlobalStyle = styled.div`
  .preview-modal {
    .ant-modal-content {
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

    .ant-modal-confirm-content {
      margin: 0 !important;
      padding: 24px 0;
    }

    .ant-modal-confirm-title {
      padding: 0 0 16px;
      margin: 0 !important;
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .ant-modal-confirm-btns {
      margin: 24px 0 0;
      padding-top: 16px;
      text-align: center;
      border-top: 1px solid rgba(0, 0, 0, 0.06);

      .ant-btn {
        min-width: 120px;
        height: 40px;
        border-radius: 20px;
        font-size: 16px;
      }
    }
  }
`;
